<template>
	<el-dialog title="新增客户" :visible.sync="addFormVisible" :close-on-click-modal="true" width="600px" v-drag>
    <el-form :model="addForm" label-width="110px" :rules="addFormRules" ref="addForm">
      <el-form-item label="客户编号" prop="customerNo">
        <el-input v-model="addForm.customerNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input v-model="addForm.enterpriseName" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-input v-model="addForm.contacts" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNo">
        <el-input v-model="addForm.phoneNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="Tenant ID" prop="tenantId">
        <el-input v-model="addForm.tenantId" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="statusCode">
        <el-select v-model="addForm.statusCode" clearable placeholder="" style="width: 95%">
          <el-option v-for="dict in statusList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="typeCode">
        <el-select v-model="addForm.typeCode" clearable placeholder="" style="width: 95%;">
          <el-option v-for="dict in typeList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行业" prop="industryCode">
        <el-select v-model="addForm.industryCode" clearable placeholder="" style="width: 95%;">
          <el-option v-for="dict in industryList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="regionCode">
        <el-select v-model="addForm.regionCode" clearable placeholder="" style="width: 95%;">
          <el-option v-for="dict in regionList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="传真" prop="fax">
        <el-input v-model="addForm.fax" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="邮编" prop="zipCode">
        <el-input v-model="addForm.zipCode" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="网站" prop="website">
        <el-input v-model="addForm.website" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="addr">
        <el-input v-model="addForm.addr" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="发票抬头" prop="fpTitle">
        <el-input v-model="addForm.fpTitle" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="开户行" prop="fpBankName">
        <el-input v-model="addForm.fpBankName" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="银行账号" prop="fpBankAccNo">
        <el-input v-model="addForm.fpBankAccNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="开票电话" prop="fpPhoneNo">
        <el-input v-model="addForm.fpPhoneNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="税号" prop="fpTaxNo">
        <el-input v-model="addForm.fpTaxNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="开票地址" prop="fpAddr">
        <el-input v-model="addForm.fpAddr" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
		  <el-form-item label="客户经理" prop="salesUserId">
        <el-select v-model="addForm.salesUserId" placeholder="" @change="onSalesChanged($event)"
                :remote-method="initSalesList" clearable filterable remote style="width: 95%">
          <el-option v-for="item in salesSlt.result.list" :key="item.val" :label="item.label" :value="item.val" />
          <el-pagination layout="total, prev, pager, next"
                hide-on-single-page
                @current-change="onSalesPageChanged"
                :current-page="salesSlt.pageNo"
                :page-size="salesSlt.pageSize"
                :total="salesSlt.result.size"/>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" :rows="5" placeholder="" v-model="addForm.remark" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click.native="addFormVisible = false">取消</el-button>
      <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
	import {validatePhone} from '@/utils/validate';
	import {addCustomer} from "@/api/system/customer";
  import {getSalesDropDownList} from "@/api/system/user";
	export default {
		data() {
			return {
        statusList: [],
        typeList: [],
        industryList: [],
        regionList:[],

        addFormVisible: false,//新增界面是否显示
        addLoading: false,
        addFormRules: {
          customerNo: [
            {required: true, message: '请输入客户编号', trigger: 'blur'}
          ],
          enterpriseName: [
            {required: true, message: '请输入企业名称', trigger: 'blur'}
          ],
          phoneNo: [
            {required: true, message: '请输入联系电话', trigger: 'blur'}
            , {validator: validatePhone, trigger: 'blur'}
          ]
        },
        //新增界面数据
        addForm: {

        },
        //销售下拉列表
        salesSlt: {
          result: {
            size: 0,
            list: []
          },
          keywords: "",
          pageNo: 1,
          pageSize: 10
        }
			}
		},
		methods: {
      getCustomerStatusList() {
        this.getDicts("sys_customer_status").then(response => {
          this.statusList = response.data;
        });
      },
      getCustomerTypeList() {
        this.getDicts("sys_customer_type").then(response => {
          this.typeList = response.data;
        });
      },
      getCustomerIndustryList() {
        this.getDicts("sys_customer_industry").then(response => {
          this.industryList = response.data;
        });
      },
      getCustomerRegionList() {
        this.getDicts("sys_customer_region").then(response => {
          this.regionList = response.data;
        });
      },
			show: function() {
        this.addFormVisible = true;
        this.addForm = {
          customerNo: null,
          enterpriseName: null,
          contacts: null,
          phoneNo: null,
          tenantId: null,
          statusCode: null,
          typeCode: null,
          industryCode: null,
          regionCode: null,
          fax: null,
          email: null,
          zipCode: null,
          website: null,
          addr: null,
          fpTitle: null,
          fpBankName: null,
          fpBankAccNo: null,
          fpPhoneNo: null,
          fpTaxNo:null,
          fpAddr: null,
          salesUserId: null,
          remark: null
        };
        this.resetForm("addForm");

        this.getCustomerStatusList();
        this.getCustomerTypeList();
        this.getCustomerIndustryList();
        this.getCustomerRegionList();
        this.initSalesList();
			},
			//新增
      addSubmit: function () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            var params = "customerNo=" + this.addForm.customerNo
              + (this.addForm.enterpriseName ? "&enterpriseName=" + this.addForm.enterpriseName : "")
              + (this.addForm.contacts ? "&contacts=" + this.addForm.contacts : "")
              + (this.addForm.phoneNo ? "&phoneNo=" + this.addForm.phoneNo : "")
              + (this.addForm.tenantId ? "&tenantId=" + this.addForm.tenantId : "")
              + (this.addForm.statusCode ? "&statusCode=" + this.addForm.statusCode : "")
              + (this.addForm.typeCode ? "&typeCode=" + this.addForm.typeCode : "")
              + (this.addForm.industryCode ? "&industryCode=" + this.addForm.industryCode : "")
              + (this.addForm.regionCode ? "&regionCode=" + this.addForm.regionCode : "")
              + (this.addForm.fax ? "&fax=" + this.addForm.fax : "")
              + (this.addForm.email ? "&email=" + this.addForm.email : "")
              + (this.addForm.zipCode ? "&zipCode=" + this.addForm.zipCode : "")
              + (this.addForm.website ? "&website=" + this.addForm.website : "")
              + (this.addForm.addr ? "&addr=" + this.addForm.addr : "")
              + (this.addForm.fpTitle ? "&fpTitle=" + this.addForm.fpTitle : "")
              + (this.addForm.fpBankName ? "&fpBankName=" + this.addForm.fpBankName : "")
              + (this.addForm.fpBankAccNo ? "&fpBankAccNo=" + this.addForm.fpBankAccNo : "")
              + (this.addForm.fpPhoneNo ? "&fpPhoneNo=" + this.addForm.fpPhoneNo : "")
              + (this.addForm.fpTaxNo ? "&fpTaxNo=" + this.addForm.fpTaxNo : "")
              + (this.addForm.fpAddr ? "&fpAddr=" + this.addForm.fpAddr : "")
              + (this.addForm.salesUserId ? "&salesUserId=" + this.addForm.salesUserId : "")
              + (this.addForm.remark ? "&remark=" + this.addForm.remark : "");

            this.addLoading = true;
            addCustomer(params).then(res => {
              this.$message({type: "success", message: res.msg});
              this.$refs['addForm'].resetFields();
              this.addFormVisible = false;
              this.addLoading = false;
              this.$emit("success", 1);
            }).catch((err) => {
              this.addLoading = false;
            });
          }
        });
      },

      initSalesList(keywords) {
        this.salesSlt.keywords = keywords;
        this.onSalesPageChanged(1, 10);
      },
      onSalesPageChanged(pno, psize) {
        if (pno != null) {
          this.salesSlt.pageNo = pno;
        }
        if (psize != null) {
          this.salesSlt.pageSize = psize;
        }
        var params = {keywords: this.salesSlt.keywords, pageNo: this.salesSlt.pageNo, pageSize: this.salesSlt.pageSize};
        getSalesDropDownList(params).then(resp => {
          this.salesSlt.result.size = resp.data.size;
          this.salesSlt.result.list = resp.data.list.map(item => {
            return {val: item.userId, label: item.userName + " " + item.nickName};
          });
        }).catch(resp => {
          this.salesSlt.result.size = 0;
          this.salesSlt.result.list = [];
        });
      },
      onSalesChanged(salesUserId) {
        if (salesUserId) {
          return;
        }
        this.initSalesList();
      }
		},
		mounted() {

		}
	}
</script>

<style>

</style>

